<template>
  <div id="login">
    <div class="containner flex item-center justify-around"><img :src="require('@/assets/login_bg.png')"
        class="rounded box-shadow">
      <div>
        <div class="gray weight text-xl">客户登录</div>
        <form>
          <div class="mt-20"><input type="text" placeholder="请输入手机号码" class="user_name hand"
              v-model="customer.user_phone"></div>
          <div class="my-20"><input type="password" placeholder="请输入账户密码" class="user_pass hand"
              v-model="customer.user_password"></div>
          <div><button type="button" class="btn-login hand" @click="login"> 登 录 </button></div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapActions
  } from 'vuex'
  export default {
    computed: {
      ...mapState(['customer']),
    },
    methods: {
      ...mapActions('customer', ['customer_login']),
      login() {
        this.customer_login()
      }
    }
  }
</script>

<style scoped="scoped">
  .user_name,
  .user_pass {
    width: 560px;
    padding: 9px 20px;
    outline: none;
    border: 1px solid #ccc;
    border-radius: 6px;
  }

  .btn-login {
    width: 600px;
    padding: 8px 20px;
    outline: none;
    border: 1px solid #c33;
    background-color: #c33;
    color: #fff;
    border-radius: 6px;
  }

  .btn-login:hover {
    background-color: #d33;
  }
</style>
